<template>
	<div class="detail_table">
		<dl class="head hidden-sm-and-down">
			<dt>No.</dt>
			<dd v-for="(item, index) in columns" :key="index">{{ item.title }}</dd>
		</dl>
		<div class="empty" v-if="data.length === 0">暂无数据</div>
		<dl class="item" v-else v-for="(item, index) in data" :key="index">
			<dt>{{ index + 1 }}</dt>
			<dd v-for="(n, i) in columns" :key="i">{{ item[n.field] }}</dd>
		</dl>
	</div>
</template>

<script>
export default {
	props: {
		columns: { type: Array, default: () => [] },
		data: { type: Array, default: () => [] }
	},
	data() {
		return {};
	},
	mounted() {
		console.log(this.columns);
		console.log(this.data);
	}
};
</script>

<style lang="scss" scoped>
.detail_table {
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	border: solid 1px #ebeef5;
	font-size: 16px;
	dl {
		display: flex;
		align-items: center;
		height: 48px;
		&.head {
			font-weight: bold;
			background-color: #f6f8fa;
		}
	}
	dt {
		flex: none;
		width: 64px;
		flex-shrink: 0;
		text-align: center;
	}
	dd {
		flex: 1;
		padding: 0 16px;
		box-sizing: border-box;
	}
	.empty {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: solid 1px #cc;
		color: #909399;
		height: 48px;
	}
}
@media screen and (max-width: 992px) {
	.detail_table {
		display: grid;
		grid-template-columns: repeat(1fr 2);
		border: none;
		dl {
			flex-wrap: wrap;
			border-radius: 4px;
			border: solid 1px #ebeef5;
			padding: 8px 0;
			height: auto;
		}
		dt {
			display: none;
		}
		dd {
			flex: none;
		}
	}
}
@media screen and (max-width: 767px) {
	.detail_table {
		grid-template-columns: repeat(1fr 1);
	}
}
</style>
